<template>
  <a-table
    :columns="columns"
    :data-source="tableList"
    :pagination="pagination"
    :scroll="{ y: '780px' }"
    @change="handleChangePage"
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'createdAt'">
        {{ dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
      </template>
      <template v-if="column.dataIndex === 'change_type'">
        {{ ChangeTypeEnum[record.change_type as keyof typeof ChangeTypeEnum] }}
      </template>
      <template v-if="column.dataIndex === 'for_orgin'">
        <span v-if="record.change_type === 'LOTTERY_DRAW'">
          活动：{{ record.active?.name || '-' }}</span
        >
        <span v-if="record.change_type === 'ECHANGE_DRAW'">
          奖品：{{ record.user_lottery_records?.name || '-' }}</span
        >
        <span v-if="record.change_type === 'BUY_POINT'"> 订单：{{ record.order?._id || '-' }}</span>
      </template>
      <template v-if="column.dataIndex === 'nickname'">
        {{ record.user?.nickname || '-' }}
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import type { TTable } from './type.dict'
import { ChangeTypeEnum } from '@/lib/enumeration'

const emit = defineEmits(['changePagination'])

defineProps<{
  tableList: TTable[]
  pagination: {
    total: number
    current: number
    pageSize: number
  }
}>()
const handleChangePage = (e: { current: number; pageSize: number }) => {
  emit('changePagination', {
    pageSize: e.pageSize,
    current: e.current,
  })
}
const columns = [
  {
    title: '用户',
    dataIndex: 'nickname', // Assuming nickname is still part of the data, though not in the new structure provided.
    width: 100,
  },
  {
    title: '变更类型',
    dataIndex: 'change_type',
    width: 100,
  },
  {
    title: '变更来源',
    dataIndex: 'for_orgin',
  },
  {
    title: '积分变更',
    dataIndex: 'points_change',
    width: 100,
  },
  {
    title: 'OpenID',
    dataIndex: 'openid',
    ellipsis: true, // In case openid is long
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
  },
]
</script>
<style lang="stylus" scoped>
@import "@/assets/antgloab-ant.css";

.active {
  color: #1677ff;
}
.red{
  color red
}
.modal-center {
  display flex
  flex-direction column
  align-items center
  justify-content center
  margin 46px 0 40px

  .modal-text {
    margin 16px 0 56px
    font-size 16px
    font-weight 500
  }

  .modal-btn {
    width 200px
    height 46px
    border-radius: 4px
    background #3483FF
    font-weight 500
    font-size 16px
  }
}

:deep(.ant-table-body::-webkit-scrollbar) {
  width: 0;
}

.header_text {
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}
</style>
